<template>
	<view>
		<view class="p-30 fl-s-c relative">
			<view class="w-1 fl-s-s">
				<text class="c-00 bold fs-28  ">1.用电户名</text>
				<input class="ibox fs-28 m-t-20" type="text" v-model="form.electmerchant" placeholder="请输入" />
			</view>
			<view class="w-1 fl-s-s m-t-40">
				<text class="c-00 bold fs-28  ">2.上传营业执照</text>
				<view class="m-t-20 w-1">
					<u-upload :fileList="fileList1" :maxSize="10485760" @afterRead="afterRead" @delete="deletePic"
						name="1" multiple :maxCount="2" width="686rpx" height="228rpx" previewFullImage>
						<view class="ubox fl-c">
							<image src="/static/images/tab1/up.png" style="width: 86rpx; height: 68rpx;" mode="">
							</image>
							<text class="c-aa fs-24">上传文件</text>
							<text class="c-33 fs-20 m-t-5">最多2个，单张文件10M以内</text>
						</view>
					</u-upload>
				</view>
			</view>
			<view class="w-1 fl-s-s m-t-40">
				<text class="c-00 bold fs-28  ">3-1.上传法人身份证件（身份证人像面)</text>
				<view class="m-t-20 w-1">
					<!-- multiple -->
					<u-upload :fileList="fileList2" :maxSize="10485760" @afterRead="afterRead" @delete="deletePic"
						name="2" :maxCount="1" width="686rpx" height="228rpx" previewFullImage>
						<view class="ubox fl-c">
							<image src="/static/images/tab1/up.png" style="width: 86rpx; height: 68rpx;" mode="">
							</image>
							<text class="c-aa fs-24">上传文件</text>
							<text class="c-33 fs-20 m-t-5">最多1个，单张文件10M以内</text>
						</view>
					</u-upload>
				</view>
			</view>
			<view class="w-1 fl-s-s m-t-40">
				<text class="c-00 bold fs-28  ">3-2.上传法人身份证件（身份证国徽面)</text>
				<view class="m-t-20 w-1">
					<!-- multiple -->
					<u-upload :fileList="fileList6" :maxSize="10485760" @afterRead="afterRead" @delete="deletePic"
						name="6" :maxCount="1" width="686rpx" height="228rpx" previewFullImage>
						<view class="ubox fl-c">
							<image src="/static/images/tab1/up.png" style="width: 86rpx; height: 68rpx;" mode="">
							</image>
							<text class="c-aa fs-24">上传文件</text>
							<text class="c-33 fs-20 m-t-5">最多1个，单张文件10M以内</text>
						</view>
					</u-upload>
				</view>
			</view>
			<view class="w-1 fl-s-s m-t-40">
				<text class="c-00 bold fs-28  ">4.用电户号（缴费电户号，可以填写多个，户号之间用逗号隔开）</text>
				<input class="ibox fs-28 m-t-20" v-model="form.accountnumber" type="text" placeholder="请输入" />
			</view>


			<view class="w-1 fl-s-s m-t-40">
				<text class="c-00 bold fs-28  ">5.请选择你的身份</text>
				<view class="fr-s-c p-r-30 m-t-20" :class="curid==index?'tabact c-ff':'tab c-33'"
					@click="(curid=index,form.identity = ids[curid])" v-for="(item,index) in ids" :key="index">
					<image :src="`/static/images/tab1/${curid==index?'y':'n'}.png`" class="m-r-20"
						style="width: 40rpx; height: 40rpx;" mode=""></image>
					{{item}}
				</view>
			</view>

			<view class="w-1 fl-s-s m-t-40">
				<text class="c-00 bold fs-28  ">6.法人姓名</text>
				<input class="ibox fs-28 m-t-20" v-model="form.name" type="text" placeholder="请输入" />
			</view>

			<view class="w-1 fl-s-s m-t-40">
				<text class="c-00 bold fs-28  ">7.法人实名手机号</text>
				<input class="ibox fs-28 m-t-20" v-model="form.mobile" type="text" placeholder="请输入" />
			</view>
			<view class="w-1 fl-s-s m-t-40">
				<text class="c-00 bold fs-28  ">8-0.房东电话</text>
				<input class="ibox fs-28 m-t-20" type="text" v-model="form.person_tel" placeholder="请输入" />
			</view>
			<view class="w-1 fl-s-s m-t-40">
				<text class="c-00 bold fs-28  ">8-1.上传房东身份证件（身份证人像面)</text>
				<view class="m-t-20 w-1">
					<!-- multiple -->
					<u-upload :fileList="fileList7" :maxSize="10485760" @afterRead="afterRead" @delete="deletePic"
						name="7" :maxCount="1" width="686rpx" height="228rpx" previewFullImage>
						<view class="ubox fl-c">
							<image src="/static/images/tab1/up.png" style="width: 86rpx; height: 68rpx;" mode="">
							</image>
							<text class="c-aa fs-24">上传文件</text>
							<text class="c-33 fs-20 m-t-5">最多1个，单张文件10M以内</text>
						</view>
					</u-upload>
				</view>
			</view>
			<view class="w-1 fl-s-s m-t-40">
				<text class="c-00 bold fs-28 ">8-2.上传房东身份证件（身份证国徽面)</text>
				<view class="m-t-20 w-1">
					<!-- multiple -->
					<u-upload :fileList="fileList8" :maxSize="10485760" @afterRead="afterRead" @delete="deletePic"
						name="8" :maxCount="1" width="686rpx" height="228rpx" previewFullImage>
						<view class="ubox fl-c">
							<image src="/static/images/tab1/up.png" style="width: 86rpx; height: 68rpx;" mode="">
							</image>
							<text class="c-aa fs-24">上传文件</text>
							<text class="c-33 fs-20 m-t-5">最多1个，单张文件10M以内</text>
						</view>
					</u-upload>
				</view>
			</view>

			<view class="w-1 fl-s-s m-t-40">
				<text class="c-00 bold fs-28 ">9.上传房屋产权（租户填写）</text>
				<view class="m-t-20 w-1">
					<u-upload :fileList="fileList3" :maxSize="10485760" @afterRead="afterRead" @delete="deletePic"
						name="3" multiple :maxCount="4" width="686rpx" height="228rpx" previewFullImage>
						<view class="ubox fl-c">
							<image src="/static/images/tab1/up.png" style="width: 86rpx; height: 68rpx;" mode="">
							</image>
							<text class="c-aa fs-24">上传文件</text>
							<text class="c-33 fs-20 m-t-5">最多4个，单张文件10M以内</text>
						</view>
					</u-upload>
				</view>
			</view>

			<view class="w-1 fl-s-s m-t-40">
				<text class="c-00 bold fs-28  ">10.上传租房合同（租户填写）</text>
				<view class="m-t-20 w-1">
					<u-upload :fileList="fileList4" :maxSize="10485760" @afterRead="afterRead" @delete="deletePic"
						name="4" multiple :maxCount="4" width="686rpx" height="228rpx" previewFullImage>
						<view class="ubox fl-c">
							<image src="/static/images/tab1/up.png" style="width: 86rpx; height: 68rpx;" mode="">
							</image>
							<text class="c-aa fs-24">上传文件</text>
							<text class="c-33 fs-20 m-t-5">最多4个，单张文件10M以内</text>
						</view>
					</u-upload>
				</view>
			</view>


			<view class="w-1 fl-s-s m-t-40">
				<view class="fr-s-c">
					<text class="c-00 bold fs-28">11.房东同意书（租户填写）</text>
					<text class="c-main bold fs-28" @click="preview">查看模板</text>
				</view>
				<view class="m-t-20 w-1">
					<u-upload :fileList="fileList5" :maxSize="10485760" @afterRead="afterRead" @delete="deletePic"
						name="5" multiple :maxCount="2" width="686rpx" height="228rpx" previewFullImage>
						<view class="ubox fl-c">
							<image src="/static/images/tab1/up.png" style="width: 86rpx; height: 68rpx;" mode="">
							</image>
							<text class="c-aa fs-24">上传文件</text>
							<text class="c-33 fs-20 m-t-5">最多2个，单张文件10M以内</text>
						</view>
					</u-upload>
				</view>
			</view>

			<view class="big-btn m-t-30 fr-c" @click="sub">提交</view>
		</view>


		<!-- <u-popup :show="show" mode="center" closeable round="20rpx" @close="show=false">
			<view class="p-30 fl-s-c" style="width: 600rpx;">
				<text class="c-33 fs-28 bold m-b-30">模板</text>
				<image src="/static/logo.png" class="w-1 br-20" mode="widthFix"></image>
				<text class="c-99 fs-26 m-t-10">长按保存</text>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/utils/base.js';
	export default {
		data() {
			return {
				fileList1: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],
				fileList5: [],
				fileList6: [],
				fileList7: [], // 房东身份证人像面
				fileList8: [], // 房东身份证国徽面
				ids: ['我是租户', '我是用电户主'],
				curid: 0,
				form: {
					electmerchant: '', // 用电商户
					yyzzimg: '', // 营业执照
					zcardimg: '', // 法人正面照
					bcardimg: '', // 法人身份证背面照
					accountnumber: '', // 用电户号 多个逗号隔开
					identity: '我是租户', // 身份
					name: '', // 法人姓名
					mobile: '', // 法人手机号
					propertyrights: '', // 房屋产权文件证明
					leasecontract: '', // 租房合同
					letteragreement: '', // 房东同意书
					landlordcardzimg: '', // 房东身份证正面
					landlordcardbimg: '', // 房东身份证背面
					person_tel: '' // 房东身份证背面
				},
				img: ''
			}
		},
		onLoad() {
			this.getimg()
		},
		watch: {
			fileList1: {
				handler(val) {
					let arr = []
					val.map(item => {
						if (item.status == 'success') {
							arr.push('/uploads/' + item.url.split('/uploads/')[1])
						}
					})
					this.form.yyzzimg = arr.join(',')
				},
				deep: true
			},
			fileList2: {
				handler(val) {
					let arr = []
					val.map(item => {
						if (item.status == 'success') {
							arr.push('/uploads/' + item.url.split('/uploads/')[1])
						}
					})
					this.form.zcardimg = arr.join(',')
				},
				deep: true
			},
			fileList3: {
				handler(val) {
					let arr = []
					val.map(item => {
						if (item.status == 'success') {
							arr.push('/uploads/' + item.url.split('/uploads/')[1])
						}
					})
					this.form.propertyrights = arr.join(',')
				},
				deep: true
			},
			fileList4: {
				handler(val) {
					let arr = []
					val.map(item => {
						if (item.status == 'success') {
							arr.push('/uploads/' + item.url.split('/uploads/')[1])
						}
					})
					this.form.leasecontract = arr.join(',')
				},
				deep: true
			},
			fileList5: {
				handler(val) {
					let arr = []
					val.map(item => {
						if (item.status == 'success') {
							arr.push('/uploads/' + item.url.split('/uploads/')[1])
						}
					})
					this.form.letteragreement = arr.join(',')
				},
				deep: true
			},
			fileList6: {
				handler(val) {
					let arr = []
					val.map(item => {
						if (item.status == 'success') {
							arr.push('/uploads/' + item.url.split('/uploads/')[1])
						}
					})
					this.form.bcardimg = arr.join(',')
				},
				deep: true
			},
			fileList7: {
				handler(val) {
					let arr = []
					val.map(item => {
						if (item.status == 'success') {
							arr.push('/uploads/' + item.url.split('/uploads/')[1])
						}
					})
					this.form.landlordcardzimg = arr.join(',')
				},
				deep: true
			},
			fileList8: {
				handler(val) {
					let arr = []
					val.map(item => {
						if (item.status == 'success') {
							arr.push('/uploads/' + item.url.split('/uploads/')[1])
						}
					})
					this.form.landlordcardbimg = arr.join(',')
				},
				deep: true
			},
		},
		methods: {
			getimg() {
				uni.$post({
					url: '/api/center/About',
					data: {
						type: 12
					}
				}).then(res => {
					this.img = uni.$dimg(res.data);
				})
			},
			preview() {
				uni.previewImage({
					index: 0,
					urls: ["http://dg.fuliaoxx.com/img/mu.jpg"]
				})
			},
			sub() {
				// for (let i in this.form) {
				// 	let arr = ['propertyrights', 'leasecontract', 'letteragreement'];
				// 	if (!arr.includes(i) && !this.form[i]) {
				// 		console.log(i)
				// 		return uni.$u.toast('请完善表单信息');
				// 	}
				// }
				uni.showLoading({
					mask: true
				})
				uni.$post({
					url: '/api/Center/Informationfilling',
					data: {
						pid: uni.getStorageSync('pid') || 0,
						...this.form
					}
				}).then(res => {
					uni.showToast({
						icon: "none",
						title: res.msg
					})
					setTimeout(() => {
						uni.hideLoading();
						uni.reLaunch({
							url: "/pages/Classify/Classify"
						})
					}, 1000)

				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseUrl + '/api/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							token: uni.getStorageSync('user').token
						},
						success: (res) => {
							console.log('jjjjjj', JSON.parse(res.data))
							setTimeout(() => {
								resolve(JSON.parse(res.data).data.fullurl)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style>
	.ibox {
		padding: 0 30rpx;
		width: 686rpx;
		height: 92rpx;
		background: #F5F5F5;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.req :before {
		content: '*';
		color: #FF5C55;
		font-size: 28rpx;
		font-weight: bold;
	}

	.ubox {
		width: 686rpx;
		height: 228rpx;
		background: #F5F5F5;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.tabact {
		width: 686rpx;
		height: 92rpx;
		background: #01796D;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.tab {
		width: 686rpx;
		height: 92rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #F1F5F6;
	}
</style>